<template>
    <div>
        <!-- 头部 -->
     <myhead></myhead>
     <!--  -->
     <div class="myType">
        <div class="myTypeLeft">
             <ul>
                <li v-for="(item,i) in list" :key="item.cate2Id"
                @click="getItem(item,i)"
                :class="{active:activess == i }" 
                >{{item.name}}</li>
            </ul>

        </div>
        <div  class="myTypeRight">
            <img src="../assets/img/ddd.png" alt="">
        </div>

        <div class="content">
           <p> {{myname}}</p>
           <ul>
               <li v-for="(item,i) in anchor" :key="i" @click="getAnchor(item)" >
                   <img :src="item.avatar" alt="">
                   <p>{{item.roomName}}</p>

                   <span>{{item.hn}}</span>
                   <i>{{item.nickname}}</i>
               </li>
           </ul>
        </div>

     </div>
    </div>
</template>

<script>
// 导入组件
import myhead from '@/components/myHead'
// 导入方法
import { getType,getYZ } from '../utils/api'
export default {
    name: 'Home',
    data() {
        return {
            list:[],
            activess:0,
            // 主播
            anchor:[],
            myname:'',
        };
    },
    created() {
        this.activess = 0
        this.myname = '颜值'
        // 获取游戏列表
        getType().then(res => {
            this.list = res.data.data
            // 默认显示颜值
           getYZ(this.list[0].shortName).then(res => {
                this.anchor = res.data.list
           })
        })
        
        
    },
    methods: {
        // 获取点击的游戏
        getItem(item,i) {
            this.myname = this.list[i].name
            this.activess = i
             
            // 点击游戏获取直播数据
            getYZ(item.shortName).then(res => {
            this.anchor = res.data.list
            })
        },
        getAnchor(item) {
            this.$router.push({
                path:'/About',
                query:{
                    item
                }
            })
            
        }
    },
    //组件挂载
    components: {
        myhead
    },
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
.myType{
    width: 100%;
    height: 30px;
    .myTypeLeft{
        width: 89%;
        overflow: hidden;
        float: left;
        background-color: darkgray;
        overflow-x:auto ;
 &::-webkit-scrollbar {
        display: none;
    }
         ul{
             width: 220%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            .active{
                color:red;
                border-bottom: 2px solid red;
            }
    }
    }
    .myTypeRight{
        width: 24px;
        height: 24px;
        text-align: center;
        margin-left: 10px;
        float: left;

    }
}

.content{
    // width: 100%;
    padding: 0 8px;
    p{
        padding-left: 8px;
    }
    ul{
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        li{
            width: 48%;
            height: 140px;
            position: relative;
            font-size: 12px;
            img{
                width: 100%;
                height: 80%;
                border-radius: 4px;

            }
            p{
                line-height: 28px;
            }
            span{
                position: absolute;
                right: 0;
                top: 0;
                display: block;
                background-color: #76767F;
                color: #fff;
                line-height: 20px;
                padding: 0 4px;
            }
            i{
                position: absolute;
                left: 0;
                bottom: 28px;
                display: block;
                color: #fff;
                line-height: 20px;
                padding: 0 4px;
            }
        }
    }
}
</style>
